<script lang="ts" setup>
type TInfo = Api.GetDataItem<typeof apis.apiInviteUsers>[];

defineProps<{
  info: TInfo;
}>();
defineEmits<{
  setCommission: [userId: string];
}>();

const tableColumn = computed(() => [
  { key: 'avatar', name: $t('zmCZyLtncPIch0JvpNhr') },
  { key: 'profit_amount', name: $t('t6EaBaE5rr17Spu0w8gB'), class: 'text-center' },
  { key: 'deposit_amount', name: $t('w3O2NhWdM90mb0cIl6MRu'), class: 'text-center' },
  { key: 'bet_amount', name: $t('jWvz6lhymri4YcEpYyAAq') },
  { key: 'link', name: $t('nUj0W3DPxcotAmoLfyk') },
  { key: 'referral_code', name: $t('xyBc6p8NcXZme26ZMocNe'), thClass: 'text-right' },
]);
</script>

<template>
  <TTable indexId="uid" :columns="tableColumn" :data="info">
    <template #avatar-td="{ row }">
      <div class="grid grid-cols-[auto_1fr] mb-4 gap-x-2 gap-y-1">
        <TAvatar
          class="row-span-2 w-10 cursor-pointer self-center hover:op-70"
          :avatar="row.avatar" :level="row.level" :levelScale="0.24"
          @click="globalPopups.userProfile.open({ userId: row.uid })"
        />
        <div class="cursor-pointer hover:op-70" @click="$emit('setCommission', row.uid)">
          <span>{{ row.nickname }}</span>
          <i class="i-ri:edit-2-fill ml-1 text-1.2em" />
        </div>
        <div class="text-xs text-sys-text-body">
          {{ $d(row.reg_time, 'full') }}
        </div>
      </div>
    </template>
    <template #profit_amount-td="{ row }">
      <TAmount :value="row.profit_amount" symbol="$" iconPos="left" format="pad-dec" />
    </template>
    <template #deposit_amount-td="{ row }">
      <TAmount :value="row.deposit_amount" symbol="$" iconPos="left" format="pad-dec" />
    </template>
    <template #bet_amount-td="{ row }">
      <TAmount :value="row.bet_amount" symbol="$" iconPos="left" format="pad-dec" />
    </template>
    <template #link-td="{ row }">
      <div class="flex gap-1">
        <span>Tg：{{ desensitize(row.parent_channel_telegram_invite_url, 10) }}</span>
        <TCopy :source="row.parent_channel_telegram_invite_url" :nthParent="1" />
      </div>
      <div class="flex gap-1">
        <span>Web：{{ desensitize(row.parent_channel_web_invite_url, 10) }}</span>
        <TCopy :source="row.parent_channel_web_invite_url" :nthParent="1" />
      </div>
    </template>
    <template #referral_code-td="{ row }">
      <div class="flex justify-end gap-1">
        <span>{{ desensitize(row.parent_channel_referral_code, 10) }}</span>
        <TCopy :source="row.parent_channel_referral_code" :nthParent="1" />
      </div>
    </template>
  </TTable>
</template>
